<template>
	<view class="info">
		<image :src="item.foodPic | getImg" mode=""></image>
		<view class="">
			<view class="">{{ item.foodName }}</view>
			<view class="">
				<!-- <view>已售: {{ item.soldCount }}份</view> -->
				<view>限购: {{ item.limitNum == '-1' ? '不限' : item.limitNum + '份' }}</view>
			</view>
		</view>
		<!-- <view class="">
			<view class="" :class="{ check: item.upFlag == '上架中' }" @click="showModal('up', index)">上架</view>
			<view class="" :class="{ check: item.upFlag == '下架中' }" @click="showModal('down', index)">下架</view>
		</view> -->
	</view>
</template>

<script>
export default {
	props: ['item'],
	data() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.info {
	margin: 20rpx 0;
	@include flexs();

	image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 40rpx;
		border-radius: 10rpx;
	}

	> view:nth-child(2) {
		height: 160rpx;
		@include flexs(space-between, flex-start);
		flex-direction: column;
		flex: 1;
		line-height: 1;
		width: calc(100% - 450rpx);
		margin-right: 20rpx;

		> view:nth-child(1) {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		> view:nth-child(2) {
			font-size: 28rpx;
			@include flexs();
			color: rgba(0, 0, 0, 0.55);

			> view:nth-child(1) {
				margin-right: 20rpx;
			}
		}

		> view:nth-child(3) {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 0.55);

			// color: red;
			// font-weight: bold;
		}
	}

	view:nth-child(3) {
		width: 160rpx;

		> view {
			border: 1px solid #eee;
			font-size: 28rpx;
			line-height: 2;
			border-radius: 50rpx;
			text-align: center;
			margin: 20rpx 0;
		}

		> .check {
			color: #fa690a;
			border: 1px solid #fa690a;
		}
	}
}
</style>
